<template>
	<div class="RuleC">
		<el-row>
			<el-col :span="24">
				<el-card>
					<el-form :model="modelData" status-icon ref="modelData" label-width="100px" :inline="false"
							 size="normal">

						<el-row>
							<el-col :span="24">
								<el-form-item label="命名规则设置" prop="ruleNameStatus">
									<template>
										<el-radio v-model="modelData.ruleNameStatus" :label="1">启用</el-radio>
										<el-radio v-model="modelData.ruleNameStatus" :label="0">未启用</el-radio>
									</template>
								</el-form-item>
							</el-col>
						</el-row>

						<el-row v-if="modelData.ruleNameStatus">
							<el-col :span="24">
								<el-form-item label="地块类型前缀" prop="landType">
									<template>
										<el-radio v-model="modelData.landType" :label="1">启用</el-radio>
										<el-radio v-model="modelData.landType" :label="0">未启用</el-radio>
										<span v-if="modelData.landType"><strong style="margin-right: 10px">示例: </strong>鱼塘 - </span>
									</template>
								</el-form-item>
							</el-col>
						</el-row>

						<el-row v-if="modelData.ruleNameStatus">
							<el-col :span="24">
								<el-form-item label="镇名字前缀" prop="town">
									<template>
										<el-radio v-model="modelData.town" :label="1">启用</el-radio>
										<el-radio v-model="modelData.town" :label="0">未启用</el-radio>
										<span v-if="modelData.town"><strong style="margin-right: 10px">示例: </strong>九江镇 - </span>
									</template>
								</el-form-item>
							</el-col>
						</el-row>

						<el-row v-if="modelData.ruleNameStatus">
							<el-col :span="24">
								<el-form-item label="村名字前缀" prop="village">
									<template>
										<el-radio v-model="modelData.village" :label="1">启用</el-radio>
										<el-radio v-model="modelData.village" :label="0">未启用</el-radio>
										<span><strong style="margin-right: 10px">示例: </strong>水南村 - </span>
									</template>
								</el-form-item>
							</el-col>
						</el-row>

						<el-row v-if="modelData.ruleNameStatus">
							<el-col :span="24">
								<el-form-item label="数字后缀" prop="num">
									<template>
										<el-radio v-model="modelData.num" :label="1">启用</el-radio>
										<el-radio v-model="modelData.num" :label="0">未启用</el-radio>
										<span><strong style="margin-right: 10px">示例: </strong> - 1</span>
									</template>
								</el-form-item>
							</el-col>
						</el-row>

						<el-row v-if="modelData.ruleNameStatus">
							<el-col :span="24">
								<el-form-item label="字母后缀" prop="en">
									<template>
										<el-radio v-model="modelData.en" :label="1">启用</el-radio>
										<el-radio v-model="modelData.en" :label="0">未启用</el-radio>
										<span><strong style="margin-right: 10px">示例: </strong> - A</span>
									</template>
								</el-form-item>
							</el-col>
						</el-row>

						<el-row v-if="modelData.ruleNameStatus" style="margin-bottom: 10px; margin-left: 30px">
							<el-col :span="24">
								<strong style="margin-right: 20px">完整示例:</strong>
								<span v-if="modelData.town">九江镇 - </span>
								<span v-if="modelData.village">水南村 - </span>
								<span v-if="modelData.landType">鱼塘 - </span>
								<span v-if="modelData.num"> 1 </span>
								<span v-else-if="modelData.en"> A </span>
							</el-col>
						</el-row>
					</el-form>

					<el-button type="primary" size="small" @click="onSubmit">修 改</el-button>

				</el-card>
			</el-col>
		</el-row>

	</div>
</template>

<script>
// import axios from 'axios';
import axios from "@/api/request.js";

export default {
	name: "RuleC",
	data() {
		return {
			pageNum: 1,
			size: 2,
			total: 0,
			searchForm: {
				userName: "",
				userLevel: 0
			},
			memberInfo: {
				name: "",
				phone: "",
				userId: "",
				role: "",
				district: "",
				password: "",
				password2: "",
			},
			tableData: [],
			modelData: {
				userName: "",
				userLevel: 4
			},
			memberModalStatus: false,
			userMode: "CREATE",
			townIndex: 0,
			options: [{
				value: '实际值',
				label: '显示值'
			}]
		};
	},

	mounted() {

		this.load();
	},
	methods: {


		load() {
			axios.get(
					"rbac/data/LandInfoRule/get", {
						params: {}
					}).then((response) => {
				this.modelData = response.data.list[0];

			});
		},
		createMember() {
			this.memberModalStatus = true;
			this.userMode = "CREATE";
			this.modelData = {};
		},

		editShow(id) {
			console.log(id);
			this.memberModalStatus = true;
			this.userMode = "EDIT";
			axios.get(
					`http://localhost:2800/api/v1.0/fishing/user/getById/${id}`, {
						params: {}
					}).then((response) => {
				this.modelData = response.data;

			});
		},
		editMember() {
			this.memberModalStatus = true;
			this.userMode = "EDIT";

		},
		onSubmit() {
			axios.post(
					"rbac/data/LandInfoRule/put", {
						params: {
							id: this.modelData.id,
							ruleNameStatus: this.modelData.ruleNameStatus,
							landType: this.modelData.landType,
							village: this.modelData.village,
							town: this.modelData.town,
							en: this.modelData.en,
							num: this.modelData.num
						}
					}
			)
					.then(result => {
						console.log("******" + result.data)
						this.$message.success("修改规则完成");

					})

		},
	},
};
</script>

<style lang="scss">

.RuleC {
	background-color: #fff;
	padding: 20px;

	.el-form {
		padding: 0;

		.el-form-item__label {
			white-space: nowrap;
		}
	}

	.el-pagination {
		display: flex;
		justify-content: flex-end;
		margin-top: 20px;
		text-align: right;
	}


	.button-group {
		margin: 20px 0;

		.el-button {
			width: 130px;
			margin-right: 10px;
		}
	}

	.choicemember {
		.el-form-item__content {
			display: flex;
		}
	}

	.el-link {
		margin: 0 5px;
	}

	.el-dialog {
		.el-dialog__title {
			font-size: 16px;
			font-weight: 700;
		}

		.el-dialog__body {
			padding: 0 40px;

			.el-form-item__label {
				text-align: left;
			}
		}

		.dialog-footer {
			display: flex;
			justify-content: center;

			.el-button {
				padding: 5px 30px;
			}
		}

		.tab-flex {
			.el-button {
				padding-top: 9px;
				padding-bottom: 9px;
			}
		}

	}
}
</style>
